import React, {PureComponent} from 'react';
import moment from 'moment';
import {connect} from 'dva';
import {List, Card, Row, Col, Radio, Input, Tag, Badge, Button, Icon, Dropdown, Menu, Avatar} from 'antd';
import {Link} from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './BasicList.less';
import PhotoItem from "../../components/Photo/index";

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const {Search} = Input;

@connect(state => ({
    user: state.user,
}))
export default class ChangeCheckList extends PureComponent {
    state = {
        status: '',
        keyword: '',
        pagination: {size: 10, page: 1, total: 0},
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'user/fetchCheckChanges',
        });

    }

    onSearch = (value) => {
        this.setState({
            keyword: value,
        });
        this.loadData(this.state.pagination.page, this.state.pagination.size, value, this.state.status);
    }

    onPageChange = (page, pageSize) => {
        console.log(page, pageSize);
        this.loadData(page, pageSize, this.state.status);
    }

    onRightClick = (id, key) => {
        console.log(id, key);
        switch (key) {
            case 'check':
                this.props.dispatch({
                    type: "user/changeServiceCheck",
                    payload: {id, status: 1},
                    callback: () => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.status);

                    },
                });
                break;
            case 'uncheck':
                this.props.dispatch({
                    type: "user/changeServiceCheck",
                    payload: {id, status: 2},
                    callback: (res) => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.status);

                    },
                });
                break;

            default:
                break;
        }
    }
    loadData = (page, pageSize, status) => {
        this.props.dispatch({
            type: 'user/fetchCheckChanges',
            payload: {
                size: pageSize,
                page,
                status,
            },
        });
    }

    render() {
        const {user: {checkChanges, loading}} = this.props;
        const pagination = checkChanges.pagination;
        const statusMaps = [
            '等待审核',
            '通过审核',
            '被驳回'
        ]
        pagination.onChange = this.onPageChange;
        this.setState({
            pagination,
        });
        const Info = ({title, value, bordered}) => (
            <div className={styles.headerInfo}>
                <span>{title}</span>
                <p>{value}</p>
                {bordered && <em/>}
            </div>
        );

        const extraContent = (
            <div className={styles.extraContent}>
                <RadioGroup
                    onChange={(e) => {
                        console.log(e);
                        this.setState({
                            status: e.target.value,
                        });
                        this.props.dispatch({
                            type: 'user/fetchCheckChanges',
                            payload: {
                                size: this.state.pagination.size,
                                page: this.state.pagination.page,
                                status: e.target.value,
                            },
                        });
                    }}
                    defaultValue={this.state.status}
                >
                    <RadioButton value={0}>等待审核</RadioButton>
                    <RadioButton value={1}>通过审核</RadioButton>
                    <RadioButton value={2}>被驳回</RadioButton>
                </RadioGroup>
            </div>
        );

        const ListContent = ({data}) => (
            <div className={styles.listContent}>

                <div style={{width: 80}}>
                    <span>申请人</span>
                    <p>{data.user.name}</p>
                </div>
                <div style={{width: 100}}>
                    <span>工种</span>
                    <p><Tag color="cyan">{data.service.name}</Tag></p>
                </div>
                <div style={{width: 120}}>
                    <span>资质认证</span>
                    <p><PhotoItem src={`${data.prove}`}/></p>
                </div>
                <div style={{width: 80}}>
                    <span>状态</span>
                    <p> {statusMaps[data.status]}</p>
                </div>
                <div style={{marginTop: 12, width: 135}}>
                    <span>申请时间</span>
                    <p>{data.created_at}</p>
                </div>
                <div style={{marginTop: 12, width: 135}}>
                    <span>审核时间</span>
                    <p>{data.checked_at}</p>
                </div>
                <div/>
            </div>
        );

        const menu = data => (
            <Menu onClick={({key}) => {
                this.onRightClick(data.data.id, key);
            }}
            >
                <Menu.Item disabled={data.data.status > 0} key="check">
                    审核
                </Menu.Item>
                <Menu.Item disabled={data.data.status > 0} key="uncheck">
                    驳回
                </Menu.Item>
            </Menu>
        );

        const MoreBtn = data => (
            <Dropdown overlay={menu(data)}>
                <a>
                    更多操作 <Icon type="down"/>
                </a>
            </Dropdown>
        );

        return (
            <PageHeaderLayout>
                <div className={styles.standardList}>
                    <Card bordered={false}>

                    </Card>

                    <Card
                        className={styles.listCard}
                        bordered={false}
                        title="审核列表"
                        style={{marginTop: 24}}
                        bodyStyle={{padding: '0 32px 40px 32px'}}
                        extra={extraContent}
                    >
                        <List
                            size="large"
                            rowKey="id"
                            loading={loading}
                            pagination={pagination}
                            dataSource={checkChanges.list}
                            renderItem={item => (
                                <List.Item
                                    actions={[
                                        <MoreBtn data={item}/>]}
                                >
                                    <List.Item.Meta
                                        avatar={<Avatar src={item.user?item.user.avatar:''} shape="square" size="large"/>}
                                        title={<a href={item.href}>{item.order_no}</a>}
                                        description={item.subDescription}
                                    />
                                    <ListContent style={{justifyContent: 'flex-start'}} data={item}/>
                                </List.Item>
                            )}
                        />
                    </Card>
                </div>
            </PageHeaderLayout>
        );
    }
}
